<template>
  <div class="setting-container">
    <el-card class="setting-card" style="margin-bottom: 16px">
      <template #header>
        <div class="card-header">
          <span>账号信息</span>
          <div class="header-actions">
            <el-button type="primary" size="small" plain @click="onEdit" disabled>编辑信息</el-button>
            <el-button type="danger" size="small" @click="handleLogout">退出登录</el-button>
          </div>
        </div>
      </template>
      <div class="avatar-section">
        <el-avatar :size="72" :src="avatarUrl">{{ avatarText }}</el-avatar>
      </div>
      <el-descriptions :column="2" border>
        <el-descriptions-item label="用户名">{{ username }}</el-descriptions-item>
        <el-descriptions-item label="角色">
          <el-tag :type="roleTagType">{{ roleText }}</el-tag>
        </el-descriptions-item>
        <el-descriptions-item label="姓名">{{ realName }}</el-descriptions-item>
        <el-descriptions-item label="邮箱">{{ email }}</el-descriptions-item>
        <el-descriptions-item label="手机">{{ phone }}</el-descriptions-item>
        <el-descriptions-item label="创建时间">{{ formatDateTime(createTime) }}</el-descriptions-item>
        <el-descriptions-item label="更新时间">{{ formatDateTime(updateTime) }}</el-descriptions-item>
      </el-descriptions>
    </el-card>
  </div>
</template>

<script setup>
import { computed, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { useStore } from 'vuex'

const router = useRouter()
const store = useStore()
const username = computed(() => store.getters.username)
const role = computed(() => store.getters.role)
const user = computed(() => store.state.user || {})
const realName = computed(() => user.value?.realName || '-')
const email = computed(() => user.value?.email || '-')
const phone = computed(() => user.value?.phone || '-')
const createTime = computed(() => user.value?.createTime || '-')
const updateTime = computed(() => user.value?.updateTime || '-')
const avatarUrl = computed(() => user.value?.avatar || '')
const avatarText = computed(() => {
  const name = (user.value?.realName || store.getters.username || 'U')
  return String(name).charAt(0).toUpperCase()
})
const roleText = computed(() => {
  const r = Number(role.value)
  if (r === 1) return '学生'
  if (r === 2) return '管理员'
  return '未知'
})
const roleTagType = computed(() => {
  const r = Number(role.value)
  if (r === 2) return 'success'
  if (r === 1) return 'info'
  return ''
})

onMounted(async () => {
  try {
    await store.dispatch('fetchProfile')
  } catch (_) { }
})

const handleLogout = () => {
  store.dispatch('logout')
  router.replace('/login')
}

const formatDateTime = (value) => {
  if (!value) return '-'
  const d = new Date(value)
  if (Number.isNaN(d.getTime())) return String(value)
  const pad = (n) => String(n).padStart(2, '0')
  return `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())} ${pad(d.getHours())}:${pad(d.getMinutes())}:${pad(d.getSeconds())}`
}

const onEdit = () => {
  // 预留：后续“修改个人信息”入口
}
</script>

<style scoped>
.setting-container {
  padding: 20px;
  display: flex;
  justify-content: center;
}

.setting-container h1 {
  margin-bottom: 20px;
  color: #333;
}

.setting-card {
  width: 100%;
  max-width: 800px;
}

.card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.avatar-section {
  display: flex;
  justify-content: center;
  margin-top: 20px;
  margin-bottom: 30px;
}
</style>
